/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/24 Time: 15:35
 *
 * 住客服务
 */

import React, {Component} from 'react';
import {
  View,
  SafeAreaView,
  ScrollView,
  Text,
  Image,
  TouchableOpacity
} from 'react-native';
import {connect} from 'react-redux';
import Modal from 'react-native-modalbox';
import {styles} from './TenantServiceScreen.Style';
import TitleViewComponent from "../../../component/TitleViewComponent/TitleViewComponent"
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent"
import ReportCellViewComponent from "../../../component/ReportCellViewComponent/ReportCellViewComponent"
import {ReportStatus} from "../../../constant/ReportStatus"
import {COLOR_THEME} from "../../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign"
import {SCREEN_WIDTH} from "../../../constant/PHScreen"
import TipModalView from "../../../component/TipModalView/TipModalView"
import DateDisplayView from "../../../component/DateDisplayView/DateDisplayView"
import EmployeeServiceEfficiencyView from "./Component/EmployeeServiceEfficiencyView"

class TenantServiceScreen extends Component {
  static navigationOptions = {
    title: `住客服务`
  }

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      text: ''
    };
  }

  componentWillUnmount(): void {
    this.setState({
      text: ''
    })
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>

        <DateDisplayView
          leftText={'11月24日报表'}
          onClickLeft={() => {
          }}
        />

        <ScrollView style={{flex: 1}}>

          <DividingLineViewComponent lineHeight={5}/>

          <View style={{flex: 1}}>

            {
              <View>
                <TitleViewComponent titleName={'总体数据'} displayDescription={true} onClick={() => {
                  this.setState({
                    text: '超时，异常的占比建议都控制在30%以内'
                  });
                  this.refs.tipModal.open();
                }}/>
                <DividingLineViewComponent lineHeight={1}/>
                <View>
                  <ReportCellViewComponent title={'对客服务'} context={'没有超时,33%异常'} reportStatus={ReportStatus.Error}/>
                  <ReportCellViewComponent title={''} context={'3单完成'} reportStatus={ReportStatus.Normal}/>
                  <ReportCellViewComponent title={'退房检查'} context={'工单数为0'} reportStatus={ReportStatus.None}/>
                  <ReportCellViewComponent title={'赶房'} context={'没有超时单'} reportStatus={ReportStatus.Success}/>
                  <ReportCellViewComponent title={''} context={'1个房间，平均耗时5.1分钟'} reportStatus={ReportStatus.Normal}/>
                </View>
              </View>
            }

            <DividingLineViewComponent lineHeight={5}/>

            {
              <View>
                <TitleViewComponent titleName={'对客服务'}/>
                <DividingLineViewComponent lineHeight={1}/>
                <View>
                  <ReportCellViewComponent title={'物品/服务'} context={'2单'} reportStatus={ReportStatus.Normal}/>
                  <ReportCellViewComponent title={'催服务'} context={'0次'} reportStatus={ReportStatus.None}/>
                  <ReportCellViewComponent title={'客人换房'} context={'1次，查看更换原因'} reportStatus={ReportStatus.Normal}/>
                  <ReportCellViewComponent title={'打扫房间'} context={'工单数为0'} reportStatus={ReportStatus.None}/>
                  <ReportCellViewComponent title={'遗留查找'} context={'0次'} reportStatus={ReportStatus.None}/>
                </View>
              </View>
            }

            <DividingLineViewComponent lineHeight={5}/>

            {
              <View>
                <TitleViewComponent titleName={'员工服务效率'} displayDescription={true} onClick={() => {
                  this.setState({
                    text: '排名方法：将服务单数，查退单数，超时占比，异常占比的排名结果进行加权，根据加权分进行排序'
                  });
                  this.refs.tipModal.open();
                }}/>
                <DividingLineViewComponent lineHeight={1}/>
                {/* 列表 */}
                <EmployeeServiceEfficiencyView/>

                {/* 跳转至更多 */}
                <TouchableOpacity activeOpacity={0.8} onPress={this._onClickMore.bind(this)}>
                  <View style={styles.moreView}>
                    <Text style={styles.moreText}>
                      更多员工
                    </Text>
                    <AntDesign name={'right'} size={14} style={{color: COLOR_THEME, marginRight: 15}}/>
                  </View>
                </TouchableOpacity>
              </View>
            }
          </View>

        </ScrollView>

        <Modal style={{width: SCREEN_WIDTH - 100, height: 120, justifyContent: 'center', alignItems: 'center', borderRadius: 10}} position={"center"}
               ref={"tipModal"}>
          <TipModalView text={this.state.text}/>
        </Modal>

      </SafeAreaView>
    )
  }

  _onClickSelectDate() {

  }

  _onClickMore() {
    this.props.navigation.navigate('EmployeeServiceEfficiencyScreen')
  }
}

const props = state => {
  return {}
};

export default TenantServiceScreen = connect(props)(TenantServiceScreen);